<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>doublebind</title>
</head>
<body>
    <div id="app">


        <input v-model="num"/>
        <button v-on:click="num++">点我加矿</button>
        <button v-on:click="decrement">点我减矿</button>

        <h2>{{name}}家里有{{num}}个矿</h2>
    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            beforeCreate(){
                console.log("要去创建一个vue实例");
                console.log(this)
            },
            created(){
                console.log("已经创建完成")
                console.log(this)
            },
            el:"#app",
            data:{
                name:"刘德华",
                num:20
            },
            methods:{
                decrement(){
                    //vue的方法操作本地数据模型时候一定要加入this关键字操作
                    this.num--;
                }
            }

        });
    </script>
</body>
</html>